<template>
	<div class="app-container">


		<!-- 查询参数 -->

		<div class="search-wrapper">
			<el-form class="search-param" ref="pageParam" :model="pageParam" label-width="100px" size="mini">
				<el-form-item label="用户名">
					<el-input v-model="pageParam.name" clearable></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="pageParam.phone" clearable></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="pageParam.address" clearable></el-input>
				</el-form-item>
				<el-form-item style="margin-left: -60px;">
					<el-button type="primary" v-if="auto.btnauto(5101)" size="mini" class="el-icon-search" @click="pageByParam">确认查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 数据表格 -->
		<vxe-toolbar ref="xToolbar1" custom print :refresh="{query: oldlist}" import export>
			<template #buttons>
				<vxe-button status="success" size="mini" class="el-icon-circle-plus-outline" @click="userEditClick({})">新增用户</vxe-button>
			</template>
		</vxe-toolbar>
		<vxe-table show-overflow :column-config="{resizable: true}" :import-config="{}" :export-config="{}"
			:print-config="{}" height="400" :loading="loading" :data="tableData.list" :height="cheight-350" size="mini"
			border stripe>
			<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
			<!-- <vxe-column type="seq" title="序号" width="60"></vxe-column> -->
			<!-- <vxe-column field="userface" title="头像" width="120">
				<template #default="{ row }">
					<img v-if="row.userface" :src="row.userface" style="width: 60px;">
					<span v-else>无</span>
				</template>
			</vxe-column> -->
			<vxe-column field="name" title="姓名"></vxe-column>
			<vxe-column field="phone" title="手机号"></vxe-column>
			<vxe-column field="telephone" title="家庭电话"></vxe-column>
			<vxe-column field="address" title="地址"></vxe-column>
			<vxe-column field="username" title="用户名"></vxe-column>
			<vxe-column field="remark" title="备注"></vxe-column>
			<vxe-column field="department.name" title="部门"></vxe-column>
			<vxe-column field="company.nameCN" title="公司"></vxe-column>
			<vxe-column field="sex" title="性别">
				<template #default="{ row }">
					{{row.sex==0?'男':row.sex==1?'女':''}}
				</template>
			</vxe-column>
			<vxe-column field="email" title="邮箱"></vxe-column>
			<vxe-column title="操作" width="250" show-overflow>
				<template #default="{ row }">
					<vxe-button status="primary" v-if="auto.btnauto(5104)" icon="el-icon-edit" @click="addEditClick(row)">权限</vxe-button>
					<vxe-button status="success" v-if="auto.btnauto(5102)" icon="el-icon-edit" @click="userEditClick(row)">编辑</vxe-button>
					<vxe-button status="danger" v-if="auto.btnauto(5103)" icon="el-icon-delete" @click="handleDelete(row.id)">删除</vxe-button>
				</template>
			</vxe-column>
			<!-- <vxe-column field="_X_ID" title="_X_ID"></vxe-column> -->
		</vxe-table>
		<vxe-pager background size="small" stripe :loading="loading" :current-page="pageParam.pageIndex"
			:page-size="pageParam.pageSize" :total="tableData.totalRow"
			:page-sizes="[15, 20, 100, {label: '大量数据', value: 1000}]"
			:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" background
			class="page-wrapper" @page-change="handleCurrentChange">
		</vxe-pager>
		<!-- 新增与编辑 -->
		<add-edit ref="addEdit" @oldlist="oldlist"></add-edit>
		<!-- 新增与编辑用户 -->
		<user-edit ref="userEdit" @oldlist="oldlist"></user-edit>
	</div>
</template>

<script>
	import addEdit from './add_edit.vue';
	import userEdit from './user_edit.vue';
	import {
		UserList,
		deleteUser
	} from './index.js'
	import datajson from '@/views/util/data.json'
	import {
		getcompany,
		getDepList,
	} from '../batinfo/index.js'
	export default {
		components: {
			addEdit,
			userEdit
		},
		data() {
			return {
				loading: true,
				companylist: [],
				departmentlist: [],
				cheight: document.documentElement.clientHeight,
				pageParam: {
					address: "",
					name: "",
					phone: "",
					pageIndex: 1,
					pageSize: 15,
					// token: localStorage.getItem('goods__token')
				},
				userinfo: {},
				tableData: {
					totalRow: 0,
					list: []
				}
			}
		},
		created() {
			let userinfo = JSON.parse(localStorage.getItem("userinfo"));
			this.userinfo = userinfo;
			// this.getDepList();
			// this.getcompany();
			this.oldlist()
			
		},
		methods: {
			//公司
			async getcompany() {
				let result = await getcompany();
				this.companylist = result.obj;
			},
			//部门
			async getDepList() {
				let parm = {
					"address": "",
					"id": "2",
					"nameCN": "",
					"nameEN": "",
					"remark": ""
				}
				let result = await getDepList(parm);
				this.departmentlist = result.obj;
				console.log(this.departmentlist,this.companylist)
			},
			pageByParam() {
				this.pageParam.pageIndex = 1;
				this.pageParam.pageSize = 15;
				this.oldlist()
			},
			handleCurrentChange(val) {
				console.log(val);
				if (val.type == "size") {
					this.pageParam.pageIndex = 1;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
				if (val.type == "current") {
					this.pageParam.pageIndex = val.currentPage;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
			},
			//用户列表
			async oldlist() {
				// this.loading = true;
				// let result = await UserList(this.pageParam);
				// //console.log("返回结果", result.obj);
				 this.loading = false;
				// this.tableData.totalRow = result.obj.total;
				// this.tableData.list = result.obj.list;
				this.tableData.totalRow = datajson.userlist.length;
				this.tableData.list = datajson.userlist;

			},
			addEditClick(item) {
				this.$refs.addEdit.open(item);
			},
			userEditClick(item) {
				this.$refs.userEdit.open(item);
			},
			// 删除
			handleDelete(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del(id);
				})
			},
			async del(id) {
			
				let result = await deleteUser({
					id,
					token: this.pageParam.token
				});
				if (result.code == 1) {
					this.msgSuccess("删除成功");
					this.oldlist();
				}
				console.log(result)
			}
		}
	}
</script>

<style>
	.vxe-input--panel.type--date,
	.vxe-input--panel.type--month,
	.vxe-input--panel.type--week,
	.vxe-input--panel.type--year {
		z-index: 9998 !important
	}

	.vxe-select--panel {
		z-index: 9997 !important
	}
</style>
